$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$width: 82.292vw;
$f: 19.2;
*,
*::after,
*::before {
  box-sizing: border-box;
}
.home {
  position: relative;
  width: 100%;

  .banner {
    position: relative;
    padding-top: 3vw;
    .bg {
      overflow: hidden;

      img {
        width: 100%;
        transform: scale(1.1);
        transition: all 600ms;
        object-fit: cover;
      }
    }

    .text {
      width: $width;
      left: calc((100% - 82.292vw) / 2);
      position: absolute;
      top: 60%;
      transform: translateY(-50%);

      .t {
        color: #FFF;
        font-size: $fontSize_90;
        font-weight: 600;
      }

      .t2 {
        color: #E11B00;
        font-size: $fontSize_24;
        font-weight: 500;
      }
      .t3{
        color: #FFF;
        font-size: $fontSize_22;
        font-style: normal;
        font-weight: 400;
        margin: 1.302083333333333vw 0 0 0;
      }
    }

    &:hover {
      .bg {
        img {
          transform: scale(1);
        }
      }
    }
  }

  .section1{
    overflow: hidden;
    padding: 120/$f+vw 0 200/$f+vw 0;
    .matter{
      width: 82.292vw;
      margin: auto;
      display: flex;
      align-items: center;
      &:not(:last-child) {
        margin: 0 auto 150/$f+vw;
      }
      .img{
        width: 777/$f+vw;
        margin: 0 60/$f+vw 0 0;
        position: relative;
        div{
          width: 100%;
          height: 100%;
          overflow: hidden;
          img{
            width: 100%;
            transition: all 600ms;
          }
        }
        &:after{
          content: '';
          position: absolute;
          width: 849/$f+vw;
          height: 440/$f+vw;
          background: #F7F7F7;
          top: 60/$f+vw;
          left: -189/$f+vw;
          z-index: -1;
        }

        &:hover{
          img{
            transform: scale(1.05);
          }
        }
      }
      .text{
        width: 700/$f+vw;
        h1{
          color: #000;
          font-size: 34/$f+vw;
          font-weight: 600;
          margin: 0 0 50/$f+vw;
          line-height: 34/$f+vw;
        }
        p{
          color: #666;
          font-size: 1.1vw;
          font-weight: 300;
          line-height: 1.6; /* 172.727% */
        }
      }
      &:nth-child(2n) {
        flex-direction: row-reverse;
        .img{
          margin: 0 0 0 60/$f+vw;
          &:after{
            left: 118/$f+vw;
          }
        }
        .text{
          text-align: right;
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .banner{
      padding-top: 0;
      .bg{
        img{
          min-height: 200px;
        }
      }
      .text{
        .t{
          font-size: 24px;
        }
        .t2{
          font-size: 18px;
        }
      }
    }
    .section1{
      padding: 30px 0 80px 0;
      .matter{
        width: 90%;
        flex-direction: column!important;
        align-items: unset;
        &:not(:last-child) {
          margin: 0 auto 30px;
        }
        .img{
          width: 100%;
          margin: 0 0 18px!important;
          &:after{
            display: none;
          }
        }
        .text{
          width: 100%;
          text-align: left!important;
          h1{
            font-size: 22px;
            line-height: 1;
            margin: 0 0 15px;
          }
          p{
            font-size: 16px;
            line-height: 1.6;
          }
        }
      }
    }
  }
}